<template>
	<div class="member-edit-account">
		<div class="form">
			<div class="item">
				<div class="title">可用余额</div>
				<div class="value">
					{{ balanceNumber }}
					<span class="tip">( 冻结: 0.00 )</span>
					<el-button icon="el-icon-coin" type="text" @click="onOpenBalance">充值</el-button>
				</div>
			</div>
			<div class="item">
				<div class="title">可用积分</div>
				<div class="value">
					{{ pointNumber }}
					<span class="tip">( 冻结: 0.00 )</span>
					<el-button icon="el-icon-coin" type="text" @click="onOpenPoint">充值</el-button>
				</div>
			</div>
		</div>
		<el-tabs v-model="tab" type="card" @tab-click="onAccountTabClick">
			<el-tab-pane label="积分" name="1">
				<el-form inline>
					<el-form-item label="收支类型">
						<el-select>
							<el-option
								v-for="(item, index) in BalanceSerialType"
								:key="index"
								:label="item.name"
								:value="item.code"
							></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="交易单号">
						<el-input></el-input>
					</el-form-item>
					<el-form-item label="会员信息">
						<el-input></el-input>
					</el-form-item>
					<el-form-item label="金额">
						<el-input></el-input>
					</el-form-item>
					<el-form-item label="交易时间">
						<el-date-picker
							v-model="point.date"
							type="datetimerange"
							value-format="yyyy-MM-dd HH:mm:ss"
							range-separator="至"
							start-placeholder="开始日期"
							end-placeholder="结束日期"
						></el-date-picker>
					</el-form-item>
					<el-form-item label="交易方式">
						<el-select>
							<el-option
								v-for="(item, index) in PointSerialCategory"
								:key="index"
								:label="item.name"
								:value="item.code"
							></el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="onAccountCurrentSizeChange({ current: 1, size: point.size })">搜索</el-button>
					</el-form-item>
				</el-form>
				<el-table :data="point.tableData">
					<el-table-column label="收支类型" prop="type">
						<template #default="{row: {type}}">
							{{ formatEmnu("BalanceSerialType", type) }}
						</template>
					</el-table-column>
          <el-table-column label="金额" prop="balance"></el-table-column>
          <el-table-column label="实时金额" prop="accountBalance"></el-table-column>
					<el-table-column label="交易时间" prop="createTime"></el-table-column>
					<el-table-column label="交易方式">
						<template #default="{row: {category}}">
							{{ formatEmnu("PointSerialCategory", category) }}
						</template>
					</el-table-column>
					<el-table-column label="备注" prop="memo"></el-table-column>
				</el-table>
				<br />
				<fortress-pagination
					:total="point.total"
					:current-page="point.current"
					:page-size="point.size"
					@refreshData="onAccountCurrentSizeChange"
				></fortress-pagination>
				<br />
			</el-tab-pane>
			<el-tab-pane label="余额" name="2">
				<el-form inline>
					<el-form-item label="收支类型">
						<el-select>
							<el-option
								v-for="(item, index) in BalanceSerialType"
								:key="index"
								:label="item.name"
								:value="item.code"
							></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="交易单号">
						<el-input></el-input>
					</el-form-item>
					<el-form-item label="会员信息">
						<el-input></el-input>
					</el-form-item>
					<el-form-item label="金额">
						<el-input></el-input>
					</el-form-item>
					<el-form-item label="交易时间">
						<el-date-picker
							type="datetimerange"
							value-format="yyyy-MM-dd HH:mm:ss"
							range-separator="至"
							start-placeholder="开始日期"
							end-placeholder="结束日期"
						></el-date-picker>
					</el-form-item>
					<el-form-item label="交易方式">
						<el-select>
							<el-option
								v-for="(item, index) in PointSerialCategory"
								:key="index"
								:label="item.name"
								:value="item.code"
							></el-option>
						</el-select>
					</el-form-item>
				</el-form>
				<el-table :data="balance.tableData">
					<el-table-column label="收支类型" prop="type">
						<template #default="{row: {type}}">
							{{ formatEmnu("BalanceSerialType", type) }}
						</template>
					</el-table-column>
					<el-table-column label="金额" prop="balance"></el-table-column>
					<el-table-column label="实时金额" prop="accountBalance"></el-table-column>
					<el-table-column label="交易时间" prop="createTime"></el-table-column>
					<el-table-column label="交易方式">
						<template #default="{row: {category}}">
							{{ formatEmnu("PointSerialCategory", category) }}
						</template>
					</el-table-column>
					<el-table-column label="备注" prop="memo"></el-table-column>
				</el-table>
				<br />
				<fortress-pagination
					:total="balance.total"
					:current-page="balance.current"
					:page-size="balance.size"
					@refreshData="onAccountCurrentSizeChange"
				></fortress-pagination>
				<br />
			</el-tab-pane>
		</el-tabs>
		<member-finance ref="MemberFinanceRef"></member-finance>
	</div>
</template>

<script>
import MemberFinance from "./member-finance.vue"
import FortressPagination from "@/components/fortress-pagination.vue"
import request from "@/common/request"
import { enumList } from "@/api/public.api.js"

export default {
	name: "member-edit-account",
	props: {
		id: {
			type: [String, Number],
			default: "",
		},
		formData: {
			type: Object,
			default: () => ({}),
		},
	},
	data() {
		return {
			point: {
				tableData: [],
				total: 0,
				current: 1,
				size: 10,
				date: [],
			},
			balance: {
				tableData: [],
				total: 0,
				current: 1,
				size: 10,
			},
			tab: "1",
			pointNumber: 0,
			balanceNumber: 0,
			PointSerialCategory: [],
			BalanceSerialType: [],
		}
	},
	computed: {},
	created() {
		this.onAccountTabClick()
		this.getMemberInfo()

		enumList("PointSerialCategory", "member").then(res => {
			this.PointSerialCategory = res.data
		})
		enumList("BalanceSerialType", "member").then(res => {
			this.BalanceSerialType = res.data
		})
	},
	methods: {
		async getPointLog() {
			try {
				const { code, data, msg } = await request("get", `/member/memberPointsSerial/page`, {
					memberId: this.id,
					current: this.point.current,
					size: this.point.size,
					startTime: this.point.date[0] || "",
					endTime: this.point.date[1] || "",
				})
				if (code != 0) {
					throw new Error(msg)
				}
				this.point.tableData = data.records
				this.point.total = data.total
			} catch (error) {
				this.$message.error(error.message)
			}
		},
		async getBalanceLog() {
			try {
				const { code, data, msg } = await request("get", `/member/memberAccountSerial/page`, {
					memberId: this.id,
					current: this.balance.current,
					size: this.balance.size,
				})
				if (code != 0) {
					throw new Error(msg)
				}
				this.balance.tableData = data.records
				this.balance.total = data.total
			} catch (error) {
				this.$message.error(error.message)
			}
		},

		async getMemberInfo() {
			try {
				const { code, data, msg } = await request("get", `/member/memberAccount/infoByMemberId?memberId=` + this.id)
				if (code != 0) {
					throw new Error(msg)
				}
				this.balanceNumber = data.balance
			} catch (error) {
				this.$message.error(error.message)
			}
			try {
				const { code, data, msg } = await request("get", `/member/memberPoints/infoByMemberId?memberId=` + this.id)
				if (code != 0) {
					throw new Error(msg)
				}
				this.pointNumber = data.balance
			} catch (error) {
				this.$message.error(error.message)
			}
		},

		onOpenPoint() {
			this.$refs.MemberFinanceRef.show(this.formData, "0", () => {
				this.getMemberInfo()
			})
		},
		onOpenBalance() {
			this.$refs.MemberFinanceRef.show(this.formData, "1", () => {
				this.getMemberInfo()
			})
		},

		onAccountTabClick() {
			let current = 1
			if (this.tab === "1") {
				current = this.point.current
			} else {
				current = this.balance.current
			}
			this.onAccountCurrentSizeChange({
				current,
				size: this.point.size,
			})
		},
		onAccountCurrentSizeChange({ current, size }) {
			if (this.tab === "1") {
				this.point.current = current
				this.point.size = size
				this.getPointLog()
			} else {
				this.balance.current = current
				this.balance.size = size
				this.getBalanceLog()
			}
		},

		formatEmnu(name, value) {
			return (this[name].find(item => item.code == value) || { name: "" }).name
		},
	},
	components: {
		MemberFinance,
		FortressPagination,
	},
}
</script>

<style lang="scss" scoped>
.member-edit-account {
	padding-bottom: 20px;
	.form {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding-bottom: 25px;
		padding-left: 20px;
		.item {
			width: 300px;
		}
		.title {
			font-weight: 700;
			font-size: 20px;
		}
		.value {
			font-weight: 700;
			color: #ef6d1e;
			font-size: 18px;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			.tip {
				font-size: 14px;
				color: #999;
				font-weight: 500;
				margin-right: 15px;
				margin-left: 10px;
				line-height: 1;
			}
		}
	}
}
</style>
